<!-- 行为标签 -->
<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view class="items">
				<view class="itemTop dis dis2 dis3" @click="isShows(index)">
					<view class="item_left dis dis2">
						<image :src="item.image" mode="aspectFit" class="imgs"></image>
						<text class="itemText">{{item.title}}</text>
					</view>
					<view class="item_rigth contenr">
						<image src="../../../static/image/icon16.png" mode="aspectFit" :class="{'cartoon':item.isShow}"></image>
					</view>
				</view>
				<block v-if="item.isShow">
					<view class="itemBody dis dis6">
						<view class="list contenr" v-for="(i,index1) in item.good" :key="index1" :class="{'select':i.select}" @click="pitchOne(index,index1,i.ActionId)">{{i.ActionTitle}}</view>
					</view>
				</block>

			</view>
		</block>
		<view class="kongsLis"></view>
		<view class="buttons dis dis3" v-if="!isSelect "  :class="[isIPX?'isIPXs':'']">
			<view class="left_btn contenr">
				<!-- <image src="../../../static/image/icon_2.png" mode="aspectFit" class="dataImg1" v-if="dates=='今天'"></image> -->
				<view class="date  contenr"  v-if="dates=='今天'" @click="showModel">{{dateDataTo}}</view>
				<view class="date dates contenr" v-else>{{dates}}</view>
			</view>
			<view class="rigth_btn contenr">
				<image src="../../../static/image/icon_10.png" mode="aspectFit" class="dataImg2"></image>
			</view>
		</view>
		<view class="buttons dis dis3"  :class="[isIPX?'isIPXs':'']" v-else>
			<view class="left_btn contenr" v-if="young=='young' ">
				<view class="date contenr" @click="showModel">{{dateDataTo}}</view>
			</view>
			<view class="left_btn contenr" v-else>
					<view class="date  contenr">{{dates}}</view>
			</view>
			<view class="rigth_btn contenr">
				<view class="rigth_btn_1 contenr" @click="subtim">确认记录</view>
			</view>
		</view>
		<view class="bgCengs" v-if="youngRout==1">
			<view class="bgceng_1">
				<ren-calendar ref='ren' :collapsible="true"  :disabledAfter="true" :headerBar='true' @onDayClick='onDayClick'  @fnnc="fnnc"></ren-calendar>
			</view>
		</view>
	</view>
</template>

<script>
	let app= getApp().globalData;
	import util from '../../../common/js/util.js';
	import RenCalendar from '@/components/ren-calendar.vue';
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				list: [],
				date: '今天',//用户选择的
				isSelect: false,
				dateData:'',//日历处跳转过来的，
				selectData:[],//用户选择的数据
				startDate:'2000-01-01',
				endDate:'',
				dates: '今天',//用户选择的时间
				dateDataTo:'今天',//young页面跳转过来的
				young:app.dateTime,
				youngRout:0,//默认值为0；
				isIPX: app.isIPX,
			}
		},
		methods: {
			showModel(){
				this.youngRout=1;
			},
			
			isShows(index) {
				let list=this.list;
				list[index].isShow = !list[index].isShow ;
				this.list = list;
			},
			getDate(e) {
				console.log(e)
				this.date = e.detail.value;
				this.dateData =  e.detail.value;
				this.dateDataTo = e.detail.value
				console.log(this.dateData)
			},
			// 用户获取数据
			getData() {
				let that = this;
				let list = [];
				this.$http._post('yang/actionlist.do').then(res => {
					console.log(res)
					if (res.data.issuccess == 1) {
						let {
							data
						} = res.data;
						let actionlist = data.actionlist;
						for (let i in actionlist) {
							let good = actionlist[i];
							for(let y=0;y<good.length;y++){
								good[y].select = false
							}
							let arr = i.split(",")
							// console.log(arr)
							list.push({
								title: arr[0],
								good: good,
								isShow: false,
								image:arr[1]
							})
						}
						that.list = list;
						if(app.dateTime !='young'){
							that.dateData = app.dateTime
						}else{
							that.dateData = data.today;
						}
						console.log('that.dateData',that.dateData)
					} else {
						this.$http.isMssage(res.data.msg)
					}
				})
			},
			// 用户点击事件
			pitchOne(index,index1,id){
				let list = this.list;
				list[index].good[index1].select = !list[index].good[index1].select
				this.list = list;
				this.combinationDate(id);
				this.isShowBtn();
			},
			combinationDate(id){
				let selectData = this.selectData;
				let is =false;
				if(selectData.length==0){
					selectData.push(id);
				}else{
					for(let i=0;i<selectData.length;i++){
						if(id==selectData[i]){
							selectData.splice(i, 1);
							is =false;
							break;
						}else{
							is=true;
						}
					};
					if(is){
						selectData.push(id)
					}
					
				}
				// console.log(selectData)
				this.selectData=selectData;
				
			},
			// 是否显示按钮
			isShowBtn(){
				let list =this.list;
				let is =false;
				for(let i=0;i<list.length;i++){
					let good=list[i].good;
					for(let y=0;y<good.length;y++){
						if(good[y].select){
							is=true;
						}
					}
				}
				console.log('is',is)
				this.isSelect = is;
				this.$forceUpdate()
			},
			subtim(){
				let that =this;
				this.$http._post('yang/actionsubmit.do',{
					actionday:that.dateData, 
					actionlist:that.selectData
				}).then(res=>{
					if(res.data.issuccess==1){
						that.$http.isMssage(res.data.data);
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}
					console.log(res)
				})
			},
			onDayClick(data) {
				let that =this;
				// this.dates = data.date;
				this.dateDataTo = data.date;
				this.youngRout= 0;
				this.dateData = data.date;
				console.log('datas',this.dates)
				
			},
			fnnc(data){
				// this.Y=data.y;
				// this.M=data.m;
				console.log('data',data)
			}
		},
		onLoad() {
			let that =this;
			console.log('app.dateTime',app.dateTime)
			if(app.dateTime !='young'){
				that.dates = app.dateTime;
				that.dateData = that.dates ;
			}else{
				that.youngRout = 1;
				
			}
			let date = new Date();
			let endDate = util.fmdata(date);
			this.endDate= `${endDate.Y}-${endDate.M}-${endDate.D}`
			console.log('endDate',this.endDate)
			this.getData()
			console.log('that.dateData',that.dateData)
		}
	}
</script>

<style lang="scss" scoped>
	
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	.items {
		width: 686upx;
		min-height: 139upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin: 40upx auto 32upx auto;

		.itemTop {
			width: 686upx;
			height: 139upx;

			.item_left {
				height: 100%;

				.imgs {
					width: 52upx;
					height: 52upx;
					margin: 0 16upx 0 30upx;
				}

				.itemText {
					font-size: 36upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}
			}

			.item_rigth {
				width: 44upx;
				height: 44upx;
				margin-right: 24upx;

				image {
					width: 44upx;
					height: 44upx;
					transition: All 0.4s ease;
					-webkit-transition: All 0.4s ease;

				}

				.cartoon {
					transform: rotate(90deg); //180°旋转图片。
				}
			}
		}

		.itemBody {
			width: 100%;

			.list {
				height: 64upx;
				min-width: 96upx;
				background: #F8F8F8;
				border-radius: 32upx;
				font-size: 29upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #333333;
				padding: 0 20upx;
				// margin: 0upx 12upx 40upx 12upx;
				margin-left: 28upx;
				margin-bottom: 40upx;
			}

			.select {
				background: #FFF0C2;
				font-size: 29upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333;
			}
		}
	}

	.buttons {
		width: 750upx;
		height: 128upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		margin-right: 32upx;

		.left_btn {
			width: 40%;
			height: 100%;

			.dataImg1 {
				width: 230upx;
				height: 90upx;
			}
			.date {
				width: 228upx;
				height: 88upx;
				background: #333;
				border-radius: 44upx;
				// border: 2upx solid $bgColor;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #fff;
			}
			.dates{
				background-color: #ededed;
				color: #FFFFFF;
				// border: 2upx solid #c1c1c1;
			}
		}

		.rigth_btn {
			width: 60%;
			height: 100%;

			.dataImg2 {
				width: 426upx;
				height: 88upx;
				margin-right: 32upx;
			}

			.rigth_btn_1 {
				width: 426upx;
				height: 88upx;
				background: #ffd344;
				border-radius: 44upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333;
			}
		}
	}
	.kongsLis{
		height: 150upx;
		width: 100%;
	}
	.bgCengs{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.6);
		position: fixed;
		bottom: 0;
		.bgceng_1{
			width: 100%;
			height: 610upx;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 99;
			border-top-left-radius:24upx;
			border-top-right-radius: 24upx;
		}
	}
	.isIPXs {
		padding-bottom: 68upx;
	}
</style>
